

<template>
  <div id="cesiumContainer"></div>
</template>

<script setup>
import { onMounted } from 'vue';
import * as Cesium from 'cesium';

onMounted(()=>{
  
  Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIzMGUxZThjZC1kYWViLTRhZTItODU5ZS0wMzFjYTQ4NDE3MTUiLCJpZCI6MjM2NDEyLCJpYXQiOjE3MjQzNDI2NzV9.wAXGjr_E9oUGVYa5tP-jdJidfXz1DtT4s5lpwqjtA6E'
  var custom = new Cesium.ArcGisMapServerImageryProvider({
    url:"https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer"
  })
  const viewer = new Cesium.Viewer('cesiumContainer',{
    imageryProvider:custom,
    infoBox: false,
    terrainProvider:Cesium.createWorldTerrain({
      requestWaterMask:true,
      requestVertexNormals:true
    })
  })
})
</script>

<style scoped>
 html,body,#cesiumContainer{
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
 }
</style>
